<template>
	<view style="display: flex;flex-direction: column;height: 100vh;">
		<u-navbar :placeholder="true" title="微聊" :bgColor="'#e9e9ea'" :autoBack="true"  :border="true"
		 z-index="10076">
			 <view slot="center" style="color: #000;font-size: 30rpx;">
				 添加联系人
			 </view>
		</u-navbar>
		<view style="padding: 25rpx;" height="50">
			<u-search shape="square" @change="getdata()" v-model="key" :focus="true" placeholder="用户名/手机号" :showAction="false" style="" @custom="$u.route({type:'back'})"></u-search>
		</view>
		<view style="flex: 1;overflow: hidden;">
			<scroll-view scroll-y="true" style="height: 100%;">
				<view v-for="i in list" v-if="i.ID != $userInfo.ID" class="item bg_view" @click="$u.route({url:'pages/add/adddetail',params:i})" hover-class="message-hover-class" style="padding: 0 0rpx;">
					<!-- <image mode="aspectFill" src="../../static/imgs/moom_green.png"/> -->
					<u-avatar shape="square" :src="i.Top"></u-avatar>
					<view class="right title-wrap  u-border-bottom">
						<view class="right_top">
							<view class="right_top_name u-line-1">{{i.Username?i.Username:'--'}}</view>
						</view>
						<view class="right_btm ">
							<view class="u-line-1">{{i.Phone}}</view>
							<view class=""></view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
					key:'',
					list:[]
			};
		},
		methods:{
			getdata(){
				uni.$u.http.get('/getUsers', {params:{key:this.key}},{} ).then(res => {
					console.log(res)
					if(res.state == 200){
						this.list = res.data;
						return;
					}
					// uni.savedata()
					uni.showToast({
						title:res.msg,
						icon:"none",
						mask:true,
						duration:2000,
					})
				}).catch(err => {
				console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss">
.item {
			width: 750rpx;
			display: flex;
			align-items: center;
			box-sizing:border-box;

			// padding: 20rpx;
			.u-avatar {
				width: 76rpx;
				height: 76rpx;
				margin:0 20rpx;
				border-radius: 12rpx;
				// border: 1px solid #e3e3e3;
				flex: 0 0 76rpx;
			}

			.right {
				// overflow: hidden;
				flex: 1 0;
				padding: 15rpx 20rpx 20rpx 0;

				&_top {
					display: flex;
					justify-content: space-between;

					&_name {
						font-size: 28rpx;
						color: $u-main-color;
						flex: 0 0 450rpx;
						overflow: hidden;
					}

					&_time {
						font-size: 22rpx;
						color: $u-light-color;
					}
				}

				&_btm {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 22rpx;
					color: $u-tips-color;
					padding-top: 10rpx;
				}
			}
		}
</style>
